<template>
  <div class="demo-box">
    <h2 class="title" @click="change('哈哈哈')">我是DEMO2组件</h2>
    <!-- 
      size：控制按钮大小 'large'、'small'(默认值)
      type：控制按钮的类型 
        'primary'主要按钮，蓝色
        'danger'危险按钮，红色
        'waring'警告按钮，橙色
        ''默认按钮，灰色(默认)
      disable：控制按钮是否被禁用 true/false(默认)
     -->
    <my-button @click="change">我是第一个按钮</my-button>
    <my-button size="large" type="danger">删除</my-button>
    <my-button type="primary" :disable="true">提交</my-button>
  </div>
</template>

<script>
import MyButton from "./MyButton.vue";
export default {
  components: { MyButton },
  name: "DemoTwo",
  methods: {
    change(type) {
      console.log("点击了:", type);
    },
  },
};
</script>

<style lang="less" scoped>
.demo-box {
  color: green;

  .title {
    font-size: 20px;
  }

  /* .btn { /!* .demo-box .btn[data-v-78d2b2e9] *!/
    background: pink;
  } */

  :deep(.btn) {
    background: pink;
  }
}
</style>